Highcharts Solid Gauge একটি বিশেষ ধরনের চার্ট যা মূলত একটি গোলাকার গেজের মতো কাজ করে। এটি মূলত পরিমাপ বা প্রগ্রেস ট্র্যাক করতে ব্যবহৃত হয়, যেমন কোন নির্দিষ্ট কাজের সম্পন্ন হওয়ার শতাংশ, প্রগ্রেস বা মেট্রিক্সের মান প্রদর্শন করা। Solid Gauge চার্ট ব্যবহার করে আপনি ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন, যা সরাসরি প্রগ্রেস বা পরিমাপের ভিজ্যুয়াল রিপ্রেজেন্টেশন দেয়।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highcharts Solid Gauge চার্ট ইমপ্লিমেন্ট করা যায়।

স্টেপ 1: প্রয়োজনীয় লাইব্রেরি ইনস্টল করা

Highcharts Solid Gauge চার্ট ব্যবহার করার জন্য আপনাকে Highcharts এবং Highcharts Solid Gauge মডিউল ইনস্টল করতে হবে।

1. Highcharts ইনস্টল করুন:

npm install highcharts --save

2. Highcharts Solid Gauge ইনস্টল করুন:

npm install highcharts-solid-gauge --save

স্টেপ 2: Angular প্রজেক্টে Highcharts Solid Gauge ইমপ্লিমেন্ট করা

এখন, আপনার Angular অ্যাপ্লিকেশনে Highcharts এবং Solid Gauge মডিউল ব্যবহার করার জন্য সেটআপ করতে হবে।

1. app.module.ts ফাইলে Highcharts এবং Solid Gauge র‍্যাপার ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Highcharts এবং Solid Gauge মডিউল ইমপোর্ট করা
import * as Highcharts from 'highcharts';
import SolidGauge from 'highcharts/modules/solid-gauge';

// Solid Gauge মডিউল সক্রিয় করা
SolidGauge(Highcharts);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

স্টেপ 3: Highcharts Solid Gauge চার্ট কনফিগারেশন

এখন app.component.ts ফাইলে Highcharts Solid Gauge চার্ট কনফিগারেশন তৈরি করুন।

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import SolidGauge from 'highcharts/modules/solid-gauge';

SolidGauge(Highcharts);  // Solid Gauge মডিউল সক্রিয় করা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // Solid Gauge চার্টের কনফিগারেশন
    this.chartOptions = {
      chart: {
        type: 'solidgauge',  // Solid Gauge চার্ট টাইপ
        backgroundColor: 'transparent'
      },
      title: {
        text: 'Completion Progress'
      },
      pane: {
        center: ['50%', '50%'],
        size: '85%',
        startAngle: -90,
        endAngle: 90,
        background: [{
          backgroundColor: Highcharts.defaultOptions.pane.background[0].backgroundColor,
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
        }]
      },
      tooltip: {
        enabled: false
      },
      yAxis: {
        min: 0,
        max: 100,
        stops: [
          [0.1, '#55BF3B'], // Green
          [0.5, '#DDDF0D'], // Yellow
          [0.9, '#DF5353']  // Red
        ],
        lineWidth: 0,
        tickWidth: 0,
        tickPosition: 'inside',
        labels: {
          y: -16
        }
      },
      series: [{
        name: 'Progress',
        data: [80],  // এখানে আপনি ডায়নামিক ডেটা দিতে পারেন
        tooltip: {
          valueSuffix: '%'
        }
      }]
    };
  }
}

এখানে, data: [80] মানে হল যে গেজের প্রগ্রেস 80% পূর্ণ হবে। আপনি এই মানটি ডায়নামিকভাবে API বা অন্য কোনো উৎস থেকে পরিবর্তন করতে পারেন।

স্টেপ 4: Highcharts Solid Gauge চার্ট দেখানো

app.component.html ফাইলে Highcharts কম্পোনেন্ট যুক্ত করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি Angular অ্যাপ্লিকেশনে Solid Gauge চার্ট রেন্ডার করবে।

ব্যাখ্যা:

1. Solid Gauge মডিউল: Highcharts এর Solid Gauge প্লাগইন ইমপ্লিমেন্ট করার জন্য SolidGauge(Highcharts) কল করা হয়েছে। এটি type: 'solidgauge' ব্যবহার করে চার্টের ধরন সেট করে।
2. Chart Configuration: চার্টের কনফিগারেশনে pane ব্যবহার করা হয়েছে, যা মূলত গেজের ব্যাকগ্রাউন্ড এবং আর্ক সেট করে। এখানে center, size, startAngle, এবং endAngle দিয়ে গেজের পজিশন এবং আঙ্গল কনফিগার করা হয়েছে।
3. yAxis: এখানে min এবং max মান সেট করা হয়েছে (0 থেকে 100)। এছাড়াও, stops ব্যবহার করা হয়েছে বিভিন্ন রঙের জন্য, যেমন গ্রিন, ইয়েলো এবং রেড, যা বিভিন্ন প্রগ্রেস লেভেল প্রদর্শন করে।
4. Series Data: series এ ডেটা দেওয়া হয়েছে, যেমন [80] মানে 80% প্রগ্রেস। আপনি এটি API বা অন্য কোনো উৎস থেকে ডাইনামিকভাবে পরিবর্তন করতে পারেন।

সারাংশ

Highcharts Solid Gauge একটি চমৎকার চার্ট টাইপ, যা আপনাকে প্রগ্রেস বা পরিমাপের মান প্রদর্শন করতে সাহায্য করে। Angular অ্যাপে Highcharts Solid Gauge ইমপ্লিমেন্ট করার মাধ্যমে আপনি সহজেই ডায়নামিক এবং ইন্টারঅ্যাকটিভ গেজ চার্ট তৈরি করতে পারবেন। এই চার্টটি সাধারণত প্রগ্রেস, ফিনান্সিয়াল ডেটা, বা অন্যান্য পরিমাপ সিস্টেমের জন্য ব্যবহৃত হয়।